<script setup lang="ts">
import type { STORAGE_MODES } from './constant'

import { graphic } from 'echarts'

import { productionApi } from '~/api'
import useEcharts, { type EChartsOption } from '~/composables/chart'

import BlockHead from './block-head.vue'
import defaults from './default-chart-option'
import DrawerItemSettings from './drawer-item-settings.vue'

defineOptions({
  name: 'ItemFive',
})

const title = ref('')
const data1 = ref<{ name: string, value: string | number }[]>([])
const data2 = ref<{ name: string, value: string | number }[]>([])
const configs = ref<{
  id: number
  title: string
  name: string
  location: 0 | 1
  indicatorNumber: string
  timeType: STORAGE_MODES
}[]>([])

const config1 = computed(() => {
  return configs.value[0]
})
const config2 = computed(() => {
  return configs.value[1]
})

const { chartRef: chartRef1, setOption: setOption1 } = useEcharts()
const { chartRef: chartRef2, setOption: setOption2 } = useEcharts()

const option1 = computed<EChartsOption>(() => {
  return {
    title: {
      text: config1.value?.name,
      textStyle: {
        fontSize: 14,
        fontWeight: 600,
      },
      left: 0,
      top: 0,
    },
    tooltip: { ...defaults.tooltip, axisPointer: { type: 'cross' } },
    grid: { ...defaults.grid, top: 40, right: 50 },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data1.value.map(item => item.name),
      axisLabel: {
        color: 'rgba(255,255,255,0.8)',
      },
      axisLine: { show: false },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: 'rgba(169, 208, 239, 0.8)',
      },
      axisLine: { show: false },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(115, 162, 255, 0.2)',
        },
      },
    },
    series: [
      {
        type: 'line',
        data: data1.value.map(v => v.value),
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 5,
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgba(23, 230, 255, 1)' },
            { offset: 1, color: 'rgba(46, 137, 250, 1)' },
          ]),
        },
        lineStyle: {
          width: 2,
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(23, 66, 123, 1)' },
            { offset: 0.2, color: 'rgba(23, 66, 123, 1)' },
            { offset: 0.6, color: 'rgba(23, 66, 123, 0.8)' },
            { offset: 1, color: 'rgba(23, 66, 123, 0)' },
          ]),
        },
      },
    ],
    dataZoom: [
      { type: 'inside' },
    ],
  }
})
const option2 = computed<EChartsOption>(() => {
  return {
    title: {
      text: config2.value?.name,
      textStyle: {
        fontSize: 14,
        fontWeight: 600,
      },
      left: 0,
      top: 0,
    },
    tooltip: { ...defaults.tooltip, axisPointer: { type: 'cross' } },
    grid: { ...defaults.grid, top: 40 },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data2.value.map(item => item.name),
      axisLabel: {
        color: 'rgba(255,255,255,0.8)',
      },
      axisLine: { show: false },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: 'rgba(169, 208, 239, 0.8)',
      },
      axisLine: { show: false },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(115, 162, 255, 0.2)',
        },
      },
    },
    series: [
      {
        type: 'line',
        data: data2.value.map(v => v.value),
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 5,
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgba(166, 239, 174, 1)' },
            { offset: 1, color: 'rgba(60, 178, 84, 1)' },
          ]),
        },
        lineStyle: {
          width: 2,
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(60, 178, 84, 1)' },
            { offset: 0.2, color: 'rgba(60, 178, 84, 1)' },
            { offset: 0.6, color: 'rgba(60, 178, 84, 0.8)' },
            { offset: 1, color: 'rgba(60, 178, 84, 0)' },
          ]),
        },
      },
    ],
    dataZoom: [
      { type: 'inside' },
    ],
  }
})

const visible = ref(false)

async function handleClick() {
  visible.value = true
}

async function getConfig() {
  const { data } = await productionApi.getConfig(0)
  title.value = data[0]?.title ?? ''
  configs.value = data ?? []
}

async function getConfigData() {
  const { data } = await productionApi.getConfigData(0)
  const d = data?.leftData ?? []
  data1.value = (d[0]?.dataList ?? []).map((v) => {
    return {
      name: v.key,
      value: v.val,
    }
  })
  data2.value = (d[1]?.dataList ?? []).map((v) => {
    return {
      name: v.key,
      value: v.val,
    }
  })
}

async function handleSaveSuccess() {
  await getConfigData()
  await getConfig()
}

onMounted(async () => {
  await getConfig()
  await getConfigData()
  setOption1(option1.value)
  setOption2(option2.value)
})

watch([chartRef1, option1], () => {
  setOption1(option1.value)
})
watch([chartRef2, option2], () => {
  setOption2(option2.value)
})
</script>

<template>
  <div class="w-full flex flex-auto flex-col">
    <BlockHead :title="title || '标题'">
      <template #extra>
        <span class="ml-auto mr-15 flex cursor-pointer items-center justify-center text-sm text-[rgba(255,255,255,0.7)] opacity-70 transition-all hover:opacity-100" title="设置" @click.stop="handleClick">
          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
            <path fill="currentColor" d="m8.686 4l2.607-2.607a1 1 0 0 1 1.414 0L15.314 4H19a1 1 0 0 1 1 1v3.686l2.607 2.607a1 1 0 0 1 0 1.414L20 15.314V19a1 1 0 0 1-1 1h-3.686l-2.607 2.607a1 1 0 0 1-1.414 0L8.686 20H5a1 1 0 0 1-1-1v-3.686l-2.607-2.607a1 1 0 0 1 0-1.414L4 8.686V5a1 1 0 0 1 1-1zM12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6" />
          </svg>
        </span>
      </template>
    </BlockHead>
    <div class="block-body h-80 w-full flex-auto items-center">
      <div class="h-full w-full flex flex-col p-3">
        <div v-if="config1" class="max-h-1/2 flex flex-1/2 items-center">
          <div v-if="false" class="tag-item flex-shrink-0">
            {{ config1.name }}
          </div>
          <div v-if="data1 && data1.length > 0" class="h-full flex-auto">
            <div ref="chartRef1" style="width: 100%; height: 100%;" />
          </div>
          <div v-else class="ml-4 flex-auto text-center text-sm opacity-50">
            暂无数据
          </div>
        </div>
        <div v-if="config2" class="max-h-1/2 flex flex-1/2 items-center">
          <div v-if="false" class="tag-item flex-shrink-0">
            {{ config2.name }}
          </div>
          <div v-if="data2 && data2.length > 0" class="h-full flex-auto">
            <div ref="chartRef2" style="width: 100%; height: 100%;" />
          </div>
          <div v-else class="ml-4 flex-auto text-center text-sm opacity-50">
            暂无数据
          </div>
        </div>
      </div>
    </div>
    <DrawerItemSettings v-model="visible" :data="configs" :location="0" @save-success="handleSaveSuccess" />
  </div>
</template>

<style lang="scss" scoped>
.tag-item {
  letter-spacing: 2px;
  @apply rounded-12 bg-[rgba(46,137,250,0.15)] px-2 text-center h-74/100 opacity-80 text-sm write-vertical-left whitespace-nowrap shadow shadow-cyan shadow-inset;
}
</style>
